<template>
  <div class="design-detail">
    <div class="title">
      <div class="left wow" style="visibility: visible">
        <p>王伊豪</p>
        <p>设计总监</p>
        <p>只有设计与表现的完美结合才能勾勒出一个全新舒适的家。</p>
      </div>
      <div
        class="button-wrap wow"
        style="visibility: visible"
      >
        <div class="btn" @click="visible = true">找TA设计</div>
      </div>
    </div>
    <div class="swiper wow" style="visibility: visible">
      <div class="imgBox">
        <img
          src="/src/assets/img/image.png"
          alt=""
        />
      </div>
      <img src="/src/assets/img/ic_c2_part1_design.png" alt="" />
      <div class="box"></div>
    </div>
    <div class="info">
      <h4 class="wow" style="visibility: visible">个人介绍</h4>
      <div class="introduce wow" style="visibility: visible">
        <ul class="lessul">
          <li>
            <i></i>
            <p>10年</p>
            <p>从业时间</p>
          </li>
          <li>
            <i></i>
            <p>南京艺术学院</p>
            <p>毕业院校</p>
          </li>
          <!---->
        </ul>
      </div>
      <div class="honor wow" style="visibility: visible">
        <p>所获荣誉</p>
        <p style="white-space: pre-wrap">
          国家注册高级室内设计师 国家注册配饰设计师 国家注册高级室内建筑师
          上海市十大优秀青年室内设计师 上海市优秀室内设计师
        </p>
      </div>
    </div>
    <!---->
    <div class="works">
      <p class="wow" style="visibility: visible">TA的作品</p>
      <div class="list wow animated" style="visibility: visible">
        <div class="cases wow" style="visibility: visible">
          <ul>
            <li>
              <div class="imgBox">
                <img
                 
                  src="https://www.shbotao.net//uploads/allimg/20230323/80b418f80f1dd4c31633b1806e823889.png"
                  alt=""
                />
                <!---->
              </div>
              <div class="content">
                <div class="top">
                  <div class="topLeft">
                    <p>远洋鸿郡</p>
                    
                  </div>
                  <div class="topRight">
                    <div class="love">
                      <img
                       
                        islocal=""
                        src=""
                        alt=""
                        class="img img2"
                      />
                    </div>
                    <p class="pActive">
                      <span>861</span>
                      人喜欢
                    </p>
                  </div>
                </div>
                <div class="concate">
                      <p class="item1">
                        <i></i>
                        500㎡
                      </p>
                      <p class="item2">
                        <i></i>
                        现代
                      </p>
                      <p class="item3">
                        <i></i>
                        别墅
                      </p>
                    </div>
                <div class="bottom">
                  <div class="bottomLeft">
                    <div class="imgBox2">
                      <img
                       
                        src="/src/assets/img/touxiang.png"
                        alt=""
                      />
                    </div>
                    <div class="text">
                      <p>王伊豪</p>
                      <p></p>
                    </div>
                  </div>
                  <div class="button-wrap">
                    <div class="btn" @click="toPage('jxdetail',1)">查看案例</div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!---->
    </div>
    <div class="more" @click = "toPage('design')">
      <i></i>
      更多设计大咖
    </div>
    <div style="height:1px"></div>
    <YueYu :visible="visible" @close-event = "closeDialog" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import YueYu from '../../components/common/YueYu.vue'
import { useRoute, useRouter } from 'vue-router'

const visible = ref(false)
const closeDialog = (e)=>{
  visible.value = e
}
const route = useRoute()
console.log(route.query.id)


const router = useRouter()
const toPage = (page,id)=>{
  let data = {
    name:page,
  }
  if(id){
    data.query = {id:id}
  }
  router.push(data).then(()=>{
    window.scrollTo({
      top:0
    })
  })
}
</script>

<style>
.design-detail>.title .left {
    opacity: 0;
    animation: slide-left-in 2s,fade-in 2s;
    animation-fill-mode: forwards
}

.design-detail>.title .button-wrap {
    opacity: 0;
    animation: slide-right-in 2s,fade-in 2s;
    animation-fill-mode: forwards
}

.design-detail .swiper,.design-detail .works p {
    opacity: 0;
    animation: slide-down-in 1s,fade-in 1s;
    animation-fill-mode: forwards
}

.design-detail .info .honor,.design-detail .info .introduce,.design-detail .info h4 {
    opacity: 0;
    animation: slide-down-in 1.5s,fade-in 1s;
    animation-fill-mode: forwards
}

.design-detail .vedio {
    opacity: 0;
    animation: fade-in 2s;
    animation-fill-mode: forwards
}

.design-detail {
    background-color: #fff;
    padding-top: 2.1rem
}

.design-detail .title {
    padding: 0 .3rem;
    display: flex;
    justify-content: space-between
}

.design-detail .title .left p:first-of-type {
    font-size: .78rem;
    color: #000;
    line-height: .78rem
}

.design-detail .title .left p:nth-of-type(2) {
    font-size: .38rem;
    color: #ec5400;
    line-height: .3rem;
    margin-top: .12rem;
    margin-bottom: .55rem
}

.design-detail .title .left p:nth-of-type(3) {
    font-size: .32rem;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.design-detail .title .button-wrap {
    margin-top: .5rem
}

.design-detail .swiper {
    padding-left: .3rem;
    margin-top: 1.05rem;
    position: relative
}

.design-detail .swiper>img {
    position: absolute;
    top: .45rem;
    right: .12rem;
    z-index: 3;
    width: 1.49rem;
    height: 6.98rem
}

.design-detail .swiper .box {
    width: .46rem;
    height: 5.68rem;
    background-color: #767777;
    position: absolute;
    right: 0;
    top: 1.1rem;
    z-index: 5
}

.design-detail .swiper .imgBox {
    width: 6.15rem!important;
    height: 7.83rem;
    display: flex;
    align-items: center
}

.design-detail .swiper .imgBox img {
    width: 100%;
    height: 100%
}

.design-detail .info {
    padding: 0 .3rem;
    margin-top: 1.68rem
}

.design-detail .info h4 {
    font-size: .46rem;
    color: #000;
    font-weight: 700
}

.design-detail .info .introduce {
    padding: .8rem 0;
    border-top: .02rem solid #d7d7d7;
    border-bottom: .02rem solid #d7d7d7;
    margin-top: .75rem;
    margin-bottom: 1rem
}

.design-detail .info .introduce ul {
    display: flex;
    justify-content: space-between
}

.design-detail .info .introduce ul li {
    display: flex;
    flex-direction: column
}

.design-detail .info .introduce ul li i {
    width: .4rem;
    height: .4rem;
    background-size: 100% 100%!important;
    display: inline-block;
    margin-bottom: .35rem
}

.design-detail .info .introduce ul li:last-of-type {
    margin-right: 0
}

.design-detail .info .introduce ul li:nth-of-type(2) {
    max-width: 3rem
}

.design-detail .info .introduce ul li:nth-of-type(2) p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.design-detail .info .introduce ul li p:first-of-type {
    font-size: .32rem;
    color: #000;
    margin-bottom: .1rem;
    font-weight: 700
}

.design-detail .info .introduce ul li p:nth-of-type(2) {
    font-size: .24rem;
    color: #999
}

.design-detail .info .introduce ul li:first-of-type i {
    background: url() no-repeat
}

.design-detail .info .introduce ul li:nth-of-type(2) i {
    width: .45rem;
    height: .4rem;
    background: url(/src/assets/img/c2_school.png) no-repeat
}

.design-detail .info .introduce ul li:nth-of-type(3) i {
    background: url() no-repeat
}

.design-detail .info .introduce .lessul {
    justify-content: flex-start
}

.design-detail .info .introduce .lessul li:first-of-type {
    margin-right: 1rem
}

.design-detail .info .honor {
    padding-bottom: 1.2rem
}

.design-detail .info .honor p {
    font-size: .28rem;
    color: #666;
    line-height: .48rem
}

.design-detail .info .honor p:first-of-type {
    font-size: .32rem;
    color: #000;
    margin-bottom: .5rem;
    font-weight: 700
}

.design-detail .info .honor p span {
    margin-right: .3rem
}

.design-detail .video {
    position: relative
}

.design-detail .video video {
    width: 100%;
    -o-object-fit: fill;
    object-fit: fill
}

.design-detail .video video::-webkit-media-controls {
    display: none!important
}

.design-detail .video>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: .9rem;
    height: .9rem;
    border-radius: 50%
}

.design-detail .video>div img {
    cursor: pointer
}

.design-detail .bottom {
    margin-bottom: 1rem
}

.design-detail .works {
    padding: 0 .3rem
}

.design-detail .works>p{
    font-size: .56rem;
    color: #000;
    margin-bottom: .85rem;
    font-weight: 700;
}

.design-detail .more {
    height: .78rem;
    border: .02rem solid #ec5400;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .24rem;
    color: #000;
    font-weight: 700;
    cursor: pointer;
    margin: 0 .3rem 1rem
}

.design-detail .more i {
    width: .23rem;
    height: .23rem;
    background-size: 100% 100%!important;
    background: url();
    margin-right: .1rem
}
</style>